<template>
  <div class="mapBar">
    <div class="info">
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text">请输入关键字</span>
        </div>
        <input v-model="keywords" @input="autoInput" type="text">
      </div>
      <div class="input-list">
        <div v-for="(v, k) in resultList" :key="k" @click="getPlaceSearch(v)">{{ v.name }}</div>
      </div>
    </div>
    <div class="container" style="width: 100%;min-width:500px;height: 350px;" ref="mapContainer"></div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {AMAP_K} from "../config"

export default {
  name: "mapView",
  data() {
    return {
      keywords: '',
      resultList: []
    }
  },
  mounted() {
    setTimeout(() => {
      this.initAMap();
    })
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: AMAP_K, version: "2.0",
        plugins: ['AMap.Scale', 'AMap.PlaceSearch','AMap.AutoComplete']
      }).then((AMap) => {
        this.map = new AMap.Map(this.$refs.mapContainer, {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 14, // 初始化地图级别
          center: [114.49289, 36.636458], // 初始化地图中心点位置
        });
        this.auto = new AMap.AutoComplete({ city: '全国' });
        this.placeSearch = new AMap.PlaceSearch({ map: this.map });  //构造地点查询类

        this.map.on('click', (e) => {
          let lng = e.lnglat.getLng(), lat = e.lnglat.getLat();
          this.$emit('getMapDot', {lng, lat})
        });
      }).catch((e) => {
        console.log(e);
      });
    },
    autoInput(){
      this.auto.search(this.keywords, (status, result) => {
        // 搜索成功时，result即是对应的匹配数据
        this.resultList = result.tips || []
      })
    },
    getPlaceSearch(e){
      this.placeSearch.setCity(e.adcode);
      this.placeSearch.search(e.name);  //关键字查询查询
      if (!!e.location){
        this.$emit('getMapDot', {lng: e.location.lng, lat: e.location.lat})
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.mapBar{
  position: relative;
}
.info {
  z-index: 2;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  position: absolute;
  top: 12px;
  background-color: white;
  width: auto;
  min-width: 300px;
  border-width: 0;
  right: 12px;
  box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
  font-size: 12px;
  .input-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 36px;
    .input-item-prepend {
      margin-right: -1px;
      .input-item-text {
        width: 96px;
        padding: 6px 10px;
        display: inline-block;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        border-radius: 3px 0 0 3px;
      }
    }
    input{
      background: #fff;
      padding: 5px 10px;
      line-height: 1.5;
      color: #495057;
      border: 1px solid #ced4da;
      border-radius: 3px;
      display: inline-block;
      appearance: none;
      flex-grow: 1;
    }
  }
  .input-list{
    overflow-y: auto;
    max-height: 270px;
    div{
      font-size: 13px;
      color: #222;
      margin: 5px 0;
      cursor: pointer;
      &:hover{
        background-color: rgb(114 124 245 / 50%);
      }
    }
  }
}
</style>
